<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>待完善语料表</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">词义</label>
                        <div class="layui-input-inline">
                            <input type="text" name="word" placeholder="请输入查询词义" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-inline">
                            <input type="text" name="author" placeholder="请输入查询作者" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>
        </div>
    </div>

    <script type="text/html" id="user-toolbar">
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
    </script>

    <script type="text/html" id="user-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
            <i class="layui-icon layui-icon-upload-drag"></i>上传手语图片
        </button>
    </script>

    <script type="text/html" id="user-createTime">
        {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
    </script>
    <div id="win" style="padding:20px;display:none">
        <form class="layui-form" action="javascript:void(0);">
            <div class="layui-form-item">
                <label class="layui-form-label"> 词义</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="gif" id="gif">                
                    <input type="text" id="word" name="word" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 作者</label>
                <div class="layui-input-inline">
                    <input type="text" name="author" lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 手语图片</label>
                <div class="layui-input-block">
                    <div class="layui-upload-drag" id="test10">
                        <i class="layui-icon"> </i>
                        <p> 说明：仅支出GIF图片，图片大小360*202像素</p>
                        <div class="layui-hide" id="uploadDemoView">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="width: 360px;height:202px">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add"> 立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary"> 重置</button>
                </div>
            </div>
        </form>
    </div>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>
        layui.use(['table', 'form', 'jquery', 'common', 'upload', 'loading', 'http', 'toast', 'upload'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let common = layui.common;
            var http = layui.http;
            var toast = layui.toast;
            var layer = layui.layer;
            var upload = layui.upload;
            var loading = layui.loading;

            let cols = [[
                { type: 'checkbox' },
                { title: '词义', field: 'word' },
                { title: '操作', toolbar: '#user-bar', align: 'center', width: 160 }
            ]]

            table.render({
                elem: '#user-table',
                url: '/YuLiaoK/daiwanspage',
                page: true,
                cols: cols,
                skin: 'line',
                toolbar: '#user-toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports'],
                request: {
                    pageName: 'PageIndex',
                    limitName: 'PageSize'
                },
                parseData: function (res) {
                    return {
                        "count": res.result.total,
                        'statusCode': res.code,
                        'data': res.result.items
                    };
                },
                response: {
                    statusName: 'statusCode',
                    statusCode: 200
                }
            });
            table.on('tool(user-table)', function (obj) {
                if (obj.event === 'edit') {
                    window.add(obj.data);
                }
            });

            table.on('toolbar(user-table)', function (obj) {
                if (obj.event === 'refresh') {
                    table.reload('user-table');
                } else if (obj.event === 'batchRemove') {
                    window.batchRemove(obj);
                }
            });
            form.on('submit(user-query)', function (data) {
                table.reload('user-table', {
                    where: data.field
                })
                return false;
            });

            window.batchRemove = function (obj) {
                //
                var checkIds = common.checkField(obj, 'id');
                if (checkIds === "") {
                    layer.msg("未选中数据", { icon: 3, time: 1000 });
                    return false;
                }
                var msg = '确定要删除这些语料库吗';
                layer.confirm(msg, {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    loading.Load(5, '请稍等...');
                    http.ajax({
                        url: '/FenCiJL/batchDelete',
                        data: JSON.stringify({ lstid: checkIds.split(',') })
                    }).done(function (data) {
                        toast.success({ title: "提示", message: "删除成功" });
                        layer.close(index);
                        table.reload('user-table');
                    }).always(function () {
                        loading.loadRemove(500);
                    });
                });
            }

            upload.render({
                elem: '#test10'
                , url: '/YuLiaoK/Upload'
                , done: function (res) {
                    layer.msg('上传成功');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.result.src);
                    $('#gif').val(res.result.src);
                }
            });
            window.add = function (data) {
                $('#id').val(data.id);
                $('#word').val(data.word);
                layer.open({
                    type: 1,
                    title: '更新',
                    area: ['600px', '660px'],
                    shade: 0.1,
                    content: $('#win')
                });
            }
            form.on('submit(add)', function (data) {
                //
                if ($('#gif').val() == '') {
                    toast.warning({ title: "警告", message: "请先上传手语图片", position: 'topRight' })
                    return;
                }
                //
                http.ajax({
                    url: '/YuLiaoK/Update',
                    data: JSON.stringify(data.field)
                }).done(function (data) {
                    layer.open({
                        icon: 1, title: '系统提示', content: '上传成功！',
                        yes: function (layero, index) {
                            window.location.reload();
                        }
                    });
                });

                return false;
            });
        })
    </script>
</body>
</html>
